// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../lib' as r25;

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// * -------------------------------------------------------------------------- */
// Hero

.r25-hero {
    background-color: transparent;

    .r25-hero-intro {
        @include text-body-lg;
    }

    .r25-hero-cta {
        .r25-hero-notice {
            display: block;
            margin: 0 auto $spacing-lg;
            max-width: $content-sm;
            text-align: center;

            @supports (background-clip: text)  {
                background-image: linear-gradient(110deg, $color-white -5%, r25.$orange 108%);
                background-clip: text;
                color: fade-out($color-white, 0.8);
            }
        }

        .r25-hero-closed {
            padding: $spacing-md $spacing-lg;
            text-align: center;
            background-image: linear-gradient(-135deg, fade-out(r25.$orange, 0.75) -100px, fade-out(r25.$orange, 1) 500px),
                linear-gradient(135deg, fade-out(r25.$teal, 0.65) -100px, fade-out(r25.$teal, 1) 500px);
            border-radius: $border-radius-lg;
            border: 1px solid rgba(255, 255, 255, 0.1);

            strong {
                @include text-body-lg;
                display: block;
                margin-bottom: $spacing-sm;

                @supports (background-clip: text)  {
                    background-image: linear-gradient(110deg, $color-white -5%, r25.$orange 108%);
                    background-clip: text;
                    color: fade-out($color-white, 0.8);
                }
            }
        }

        @media #{$mq-sm} {
            align-items: center;
            justify-content: center;
        }

        @media #{$mq-md} {
            .r25-hero-notice {
                text-align: start;
                margin: 0;
            }
        }
    }

    .r25-hero-video {
        display: none;

        video,
        img {
            border: 1px solid fade-out($color-black, 0.5);
        }

        .fallback {
            display: none;
        }

        @media #{$mq-md} {
            display: block;
        }

        @media (prefers-reduced-motion: reduce) {
            video {
                display: none;
            }

            .fallback {
                display: inline-block;
            }
        }
    }
}
